<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <my-father></my-father>
    </div>

    <!-- 只能单个加 -->

    <template id="Father">
      <div>
        <p>父组件 {{msg}}</p>
        <my-son @send="acceptMsg"></my-son>
      </div>
    </template>

    <template id="son">
      <div>
        <p>子组件 {{ msg }}</p>
        <button @click="sub">传递</button>
      </div>
    </template>

    <script>
      //子向父组件传递
      // 1.在子组件中通过 this.$emit() 自定义事件
      // 2.在子组件标签上使用自定义属性，传递的数据在事件处理函数的第一个参数中

      // 子组件
      const son = {
        template: "#son",
        data() {
          return {
            msg: "我是子组件内容",
          };
        },
        methods: {
          sub() {
            // this.$emit('事件名称','传递的数据')

            this.$emit("send", this.msg);
          },
        },
      };

      // 父组件
      const Father = {
        template: "#Father",
        data() {
          return {
            num: 100,
          };
        },
        // 在父组件中 注册 子组件
        components: {
          "my-son": son,
        },
        data() {
          return {
            msg: "",
          };
        },
        methods: {
          // 子组件向父组件传递的内容
          acceptMsg(data) {
            this.msg = data;
            // console.log("自定义事件触发",data);
          },
        },
      };

      new Vue({
        el: "#app",
        //注册组件
        //components:{组件名称,组件内容} //局部组件写在 vue内
        components: {
          "my-father": Father,
        },
      });
    </script>
  </body>
</html>
